<div ng-if="ctrl.insufficientQuota">
    <div class="alert alert-error">
        <div class="alert-title ng-binding">Error</div>
        <div>This endpoint will exceed your quota and cannot be added. Contact <a href="mailto:support@grafana.com">support@grafana.com</a>
            to increase your limit.
        </div>
    </div>
</div>
<div ng-if="!ctrl.showCreating">
    <div ng-if="ctrl.pageReady && !ctrl.endpoint.id" class="page-header">
        <h1>Add a new endpoint</h1>
    </div>
    <div class="row" ng-if="ctrl.pageReady && !ctrl.endpoint.id"
         ng-hide="ctrl.discovered || ctrl.discoveryError || ctrl.showConfig">
        <div class="col-md-10">
            <p>An endpoint is anything you want to monitor. <br><br>When you enter the fully qualified domain name of
                your endpoint, worldPing will automatically detect what is available to monitor (eg. PING, HTTP, HTTPS)
                and suggest a customizable set of defaults unique to your endpoint.</p>
        </div>
    </div>

    <div ng-if="ctrl.endpoint.id" class="page-header">
        <h1>{{ctrl.endpoint.name}}<a ng-click="ctrl.gotoDashboard(ctrl.endpoint)"><i ng-class="icon"
                                                                                     class="icon-gf icon-gf-dashboard"
                                                                                     bs-tooltip="'Go to worldPing: Summary </br>dashboard for this endpoint'"></i></a>
        </h1>
        <div class="gf-form wp-tag-margin--bottom">
            <span class="gf-form-label width-6">Tags:</span>
            <bootstrap-tagsinput ng-model="ctrl.endpoint.tags" tagclass="label rt-label-tag" placeholder="New Tag"
                                 on-tags-updated="ctrl.tagsUpdated()"></bootstrap-tagsinput>
        </div>

        <div class="page-header-tabs">
            <ul class="gf-tabs">
                <li class="gf-tabs-item">
                    <a class="gf-tabs-link"
                       href="plugins/raintank-worldping-app/page/endpoint-details?endpoint={{ctrl.endpoint.id}}">
                        Status
                    </a>
                </li>
                <li class="gf-tabs-item">
                    <a class="gf-tabs-link active"
                       href="plugins/raintank-worldping-app/page/endpoint-config?endpoint={{ctrl.endpoint.id}}">
                        Configuration
                    </a>
                </li>
            </ul>
        </div>
    </div>


    <form name="endpointForm">

        <!-- Existing endpoint -->
        <div class="gf-form-group" ng-if="ctrl.endpoint.id">
            <div class="gf-form-inline">
                <div class="gf-form gf-form--right-margin">
                    <span class="gf-form-label width-7">Endpoint</span>
                    <input class="gf-form-input max-width-21" type="text" ng-model="ctrl.newEndpointName"
                           placeholder="www.example.com" required>
                </div>
                <div class="gf-form">
                    <button class="btn btn-success" ng-click="ctrl.updateEndpoint(ctrl.endpoint)">Update Endpoint Name
                    </button>
                </div>
            </div>
            <br>
            <div class="gf-form-buttons-row">
            </div>
        </div>

        <!-- New endpoint -->
        <div class="gf-form-group" ng-if="!ctrl.endpoint.id  && ctrl.pageReady">
            <!-- Below replaces header area on submit -->
            <div class="message-header">
                <div class="message-content">
                    <div ng-show="ctrl.discovered">
                        <p><b>Discovery Successful.</b> We've suggested some default checks below based on what we were
                            able to detect. <a class="highlight-word" ng-click="ctrl.reset()">Start Over</a></p>
                    </div>
                    <div ng-show="ctrl.discoveryError">
                        <p><b>Failed to discover endpoint.</b> From here, you can configure manually or <a
                                class="highlight-word" ng-click="ctrl.reset()">start over</a>.</p>
                    </div>
                    <div ng-show="!ctrl.discovered && ctrl.showConfig">
                        <p><b>Discovery Skipped. </b>You can manually configure your endpoint below or <a
                                class="highlight-word" ng-click="ctrl.reset()">start over</a> to enter a new domain.</p>
                    </div>
                </div>
                <div ng-show="ctrl.discovered">
                    <i class="icon-gf icon-gf-endpoint inline-icon inline-icon--endpoint"></i>
                    <h2 class="inline-header">{{ctrl.endpoint.name }}</h2>
                </div>
            </div>
            <div class="gf-form-inline">
                <div class="gf-form gf-form--right-margin" ng-hide="ctrl.discovered">
                    <label class="gf-form-label width-9">Endpoint Name</label>
                    <input class="gf-form-input max-width-15" type="text" ng-model="ctrl.endpoint.name" required=""
                           ng-class="{ 'rt-text-box-success' : ctrl.discovered, 'rt-font-shrinker' : ctrl.endpoint.name > 10 }"
                           placeholder="www.example.com:80">
                </div>
                <!-- Unsubmitted state -->
                <div class="gf-form" ng-hide="ctrl.showConfig || ctrl.discoveryInProgress || ctrl.discoveryError">
                    <button class="btn btn-success" ng-click="ctrl.discover(ctrl.endpoint)">Begin Auto-Discovery
                    </button>
                </div>
                <!-- Discovery in progress -->
                <div ng-show="ctrl.discoveryInProgress">
                    <svg width="25" height="25" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#13B3D4"
                         class="puff">
                        <g fill="none" fill-rule="evenodd" stroke-width="3">
                            <circle cx="22" cy="22" r="1">
                                <animate attributeName="r"
                                         begin="0s" dur="3s"
                                         values="1; 20"
                                         calcMode="spline"
                                         keyTimes="0; 1"
                                         keySplines="0.165, 0.84, 0.44, 1"
                                         repeatCount="indefinite"/>
                                <animate attributeName="stroke-opacity"
                                         begin="0s" dur="3s"
                                         values="1; 0"
                                         calcMode="spline"
                                         keyTimes="0; 1"
                                         keySplines="0.3, 0.61, 0.355, 1"
                                         repeatCount="indefinite"/>
                            </circle>
                            <circle cx="22" cy="22" r="1">
                                <animate attributeName="r"
                                         begin="-1.5s" dur="3s"
                                         values="1; 20"
                                         calcMode="spline"
                                         keyTimes="0; 1"
                                         keySplines="0.165, 0.84, 0.44, 1"
                                         repeatCount="indefinite"/>
                                <animate attributeName="stroke-opacity"
                                         begin="-1.5s" dur="3s"
                                         values="1; 0"
                                         calcMode="spline"
                                         keyTimes="0; 1"
                                         keySplines="0.3, 0.61, 0.355, 1"
                                         repeatCount="indefinite"/>
                            </circle>
                        </g>
                    </svg>
                    <span class="rt-body-copy">Discovery in progress...</span>
                    <a ng-click="ctrl.skipDiscovery()">skip</a>
                </div>
            </div>
        </div>

        <div ng-if="ctrl.pageReady && (ctrl.showConfig || ctrl.endpoint.id || ctrl.discoveryError)">
            <div ng-include
                 src="'public/plugins/raintank-worldping-app/components/endpoint/partials/dnsForm.html'"></div>
            <div ng-include
                 src="'public/plugins/raintank-worldping-app/components/endpoint/partials/pingForm.html'"></div>
            <div ng-include
                 src="'public/plugins/raintank-worldping-app/components/endpoint/partials/httpForm.html'"></div>
            <div ng-include
                 src="'public/plugins/raintank-worldping-app/components/endpoint/partials/httpsForm.html'"></div>
        </div>
    </form>
    <div ng-show="ctrl.endpoint.id" ng-include
         src="'public/plugins/raintank-worldping-app/components/endpoint/partials/destroyForm.html'"></div>
    <div ng-show="ctrl.showConfig || ctrl.discoveryError" class="gf-form wp-tag-margin--bottom-new-endpoint">
        <span class="gf-form-label width-6">Tags:</span>
        <bootstrap-tagsinput ng-model="ctrl.endpoint.tags" tagclass="label rt-label-tag"
                             placeholder="Add tags"></bootstrap-tagsinput>
    </div>
    <div class="gf-form wp-tag-margin--bottom-new-endpoint">
        <div class="rt-body-copy" ng-show="ctrl.showConfig || ctrl.discoveryError">
            <div ng-if="!ctrl.currentlyTrial() && !ctrl.requiresUpgrade()">
                <span class="pluginlist-none-installed" style="margin: 0;"><i
                        class="icon-gf icon-gf-status wp-icon-medium"></i> This config will generate approximately <span
                        class="wp-note--mild-emphasis">{{ctrl.totalChecks()| number:1}} Million</span> checks per month.</span>
            </div>
            <div ng-if="!ctrl.currentlyTrial() && ctrl.requiresUpgrade()">
                <span class="endpoint-config--checks-exceeded" style="margin: 0;"><i
                        class="fa fa-warning wp-icon-medium"></i> This config will generate approximately <span
                        class="wp-note--mild-emphasis">{{ctrl.totalChecks()| number:1}} Million</span> additional checks per month and exceed your free tier. <a
                        href="https://grafana.com/{{ctrl.org.slug}}/worldping/upgrade"
                        target="_blank">Upgrade now</a></span>
            </div>
            <div ng-if="ctrl.currentlyTrial()">
                <span class="pluginlist-none-installed" style="margin: 0;"><i
                        class="icon-gf icon-gf-status wp-icon-medium"></i> This config will generate approximately <span
                        class="wp-note--mild-emphasis">{{ctrl.totalChecks()| number:1}} Million</span> additional checks per month during your <strong>free trial</strong>. <a
                        href="https://grafana.com/{{ctrl.org.slug}}/worldping/upgrade"
                        target="_blank">Upgrade now</a></span>
            </div>
        </div>
    </div>
    <div ng-show="ctrl.showConfig || ctrl.discoveryError">
        <button type="submit" class="btn btn-success" ng-click="endpointForm.$valid && ctrl.addEndpoint(ctrl.endpoint)">
            Add
        </button>
        <a class="btn btn-link" ng-click="ctrl.cancel();">Cancel</a>
    </div>
</div>

<!-- After adding an enpoint, allow time for data to arrive. -->

<div ng-if="ctrl.showCreating">
    <div class="page-header">
        <h1>Creating endpoint</h1>
    </div>
    <div class="creating-container">
        <div class="rt-world">
            <div class="rt-spin-dot"
                 ng-class="{ 'rt-spin-dot--10s' : ctrl.endpointReadyDelay == '10', 'rt-spin-dot--30s' : ctrl.endpointReadyDelay == '30', 'rt-spin-dot--60s' : ctrl.endpointReadyDelay == '60', 'rt-spin-dot--120s' : ctrl.endpointReadyDelay == '120' }"></div>
        </div>
        <div class="creating-container">
            <h2>Hold tight, this will take a moment</h2>
            <p class="creating-body-copy">We're contacting your endpoint from your selected probes around the globe.<br>
                Based on your config, it can take up to ~<span class="highlight-word"><strong>{{ctrl.endpointReadyDelay}} seconds</strong></span>
                for data to start appearing in your dashboard.</p>
            <a class="btn"
               ng-href="dashboard/db/worldping-endpoint-summary?var-endpoint={{ctrl.endpoint.slug}}&from=now-5m&to=now"
               ng-class="{ 'btn-success' : ctrl.endpointReady, 'btn-inverse wp-cursor--wait' : !ctrl.endpointReady }"
               ng-disabled="!ctrl.endpointReady">
        <span ng-show="ctrl.endpointReady">
          <i ng-class="icon" class="icon-gf icon-gf-dashboard"></i> Go to Summary Dashboard
        </span>
                <span ng-show="!ctrl.endpointReady">
          Getting data
          <div class="ascii-spinner-container">
            <span>&nbsp;&nbsp;</span>
            <span class="ascii-spinner-1">.&nbsp;</span>
            <span class="ascii-spinner-2">&nbsp;.</span>
            <span class="ascii-spinner-3">&nbsp;&nbsp;.</span>
          </div>
        </span>
            </a>
            <a class="btn btn-link"
               ng-href="plugins/raintank-worldping-app/page/endpoint-details?endpoint={{ctrl.endpoint.id}}">Skip to
                endpoint details</a>
        </div>
    </div>
</div>
